<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .wrap {
            padding: 10px;
        }

        .button-group button {
            padding: 2px 5px;
        }

        .button-group button+button {
            margin-left: 10px;
        }

        .slideBar {
            width: 1100px;
            height: 100px;
            margin-top: 20px;
            border: 1px solid #333;
            border-top: 0;
            position: relative;
        }

        .slideBar .ball {
            width: 100px;
            height: 100px;
            background-color: #6ff;
            border-radius: 50%;
            position: absolute;
            left: 55px;
            top: 0;

        }
    </style>
</head>

<body>
    <!-- .wrap>.button-group>button.start{开始}+button.pause{暂停}+button.back{返回} -->
    <div class="wrap">
        <div class="button-group">
            <button class="start">开始</button>
            <button class="pause">暂停</button>
            <button class="back">返回</button>
        </div>
        <div class="slideBar">
            <div class="ball"></div>
        </div>
    </div>
</body>
<script>
    // JS运动 => 每隔一段时间操作元素运动(运动的属性 left  top width height opacity等相关属性的变化)

    // 1.  每隔一段时间 => 计时器/延时器
    // 2.  操作元素运动 => 改变元素的位置 宽高 opacity

    var start = document.getElementsByClassName("start")[0];
    var pause = document.getElementsByClassName("pause")[0];
    var back = document.getElementsByClassName("back")[0];

    var ball = document.getElementsByClassName("ball")[0];

    var timer = null;

    // 正向运动: (终点值 > 起点值)   当前位置 -> 1000
    start.onclick = function () {

        // cur => 局部变量   =>  a. 记录小球的当前位置(初始位置)  b. 每隔固定时间之后移动的位置 
        var cur = ball.offsetLeft;
        var end = 1000;
        var speed = 10; // 每隔固定时间移动的距离   => 

        // 为了防止每次点击 都启动新的计时器 => 开启下一次之前,先清除上一个 => 保证只有一个计时器
        clearInterval(timer);
        timer = setInterval(() => {
            // cur += speed;  // 相对于当前位置移动
            ball.style.left = cur + "px";

            // 临界值判断 => 如果ball运动后的位置到达最大值(右边) 停止运动

            // 理想情况下 => cur == end
            // 有问题 => 要运动的数据(end - cur) 不一定是speed的整数倍

            // 怎么解决
            // 1. cur >= end(1000) (右边临界值)   
            //    cur <= end(0)    (左边临界值)
            //    左右两边条件不一致

            // 2. 设置误差允许范围 
            //  |end - cur| <= |speed|  如果在跑一次  就超了 => 没必要跑了

            // cur >= end
            // Math.abs(end - cur) <= Math.abs(speed)
            if (cur >= end) {
                clearInterval(timer);
                ball.style.left = end + "px";
            }

        }, 5);


    }

    pause.onclick = function(){
        clearInterval(timer);
    }



    // 反向运动: (终点值 < 起点值)   当前位置 -> 1000
    back.onclick = function () {

        // cur => 局部变量   =>  a. 记录小球的当前位置(初始位置)  b. 每隔固定时间之后移动的位置 
        var cur = ball.offsetLeft;
        var end = 0;
        var speed = -10; // 每隔固定时间移动的距离   => 

        // 为了防止每次点击 都启动新的计时器 => 开启下一次之前,先清除上一个 => 保证只有一个计时器
        clearInterval(timer);
        timer = setInterval(() => {
            cur += speed;  // 相对于当前位置移动
            ball.style.left = cur + "px";

            // 临界值判断 => 如果ball运动后的位置到达最大值(右边) 停止运动

            // 理想情况下 => cur == end
            // 有问题 => 要运动的数据(end - cur) 不一定是speed的整数倍

            // 怎么解决
            // 1. cur >= end(1000) (右边临界值)   
            //    cur <= end(0)    (左边临界值)
            //    左右两边条件不一致

            // 2. 设置误差允许范围 
            //  |end - cur| <= |speed|  如果在跑一次  就超了 => 没必要跑了

            // cur <= 0
            // Math.abs(end - cur) <= Math.abs(speed)
            if (cur <= end) {
                clearInterval(timer);
                ball.style.left = end + "px";
            }

        }, 5);


    }




</script>

</html>